<template>
  

  <div>
    <van-field v-model='car_number' placeholder='请输入车牌号'></van-field>
    <!-- 添加出入记录 -->
    <div>
      <van-button @click='into()'>进入</van-button>
      <!-- <van-button @click='checkAlipay()'>完成支付</van-button> -->
    </div>

    <!-- <van-tab>
      
    </van-tab> -->

    <!-- 查询出入记录 -->
    <div>
        <div>
        <van-button @click='getCarRecord'>查询</van-button>

      </div>

      <table>
        <tr>
          <td>车牌号</td>
          <td>进入时间</td>
          <td>离开时间</td>
          <td>消费金额（元）</td>
          <td>操作</td>
          <!-- <td>支付</td> -->
        </tr>
        <tr
          v-for='i in list'
          :key="i.index"
        >
          <td>{{i.car}}</td>
          <td>{{i.in_time}}</td>
          <td>{{i.out_time}}</td>
          <td>{{i.money}}</td>
          <td>
            <van-button @click='out(i.id)'>离开</van-button>
            <van-button @click='checkAlipay(i.id)'>完成支付</van-button>
          </td>
          <!-- <td>
            
          </td> -->
        
        </tr>
      </table>
    </div>
    
  </div>

</template>



<script>
import { get_car_data, get_car_record, car_into, car_out, create_order, get_alipay, check_alipay } from "@/components/axios_api/api.js"; // @符号指的是src路径
export default {
  data() {
    return {
      car_number: "",
      list: [],
      name: "",
      order_id: ''
    };
  },
  methods: {
    // 获取车辆信息
    getCarData() {
      let data = { car_number: this.car_number };
      get_car_data(data).then((res) => {
        if (res.code == 200) {
          this.name = res.name;
        } else {
          alert("数据错误");
        }
      });
    },
    // 获取车辆的出入记录
    getCarRecord() {
      let data = { car_number: this.car_number };
      get_car_record(data).then((res) => {
        if (res.code == 200) {
          this.list = res.data;
        } else {
          alert("数据错误");
        }
      });
    },

    into() {
      if (this.car_number) {
        let data = {car_number: this.car_number};
        car_into(data).then((res) => {
          if (res.code == 200) {
            this.getCarRecord()
          } else {
            alert("数据错误");
          }
        });
      }else{
        alert('请输入车牌号')
      }
    },

    out(record_id) {
      if (record_id) {
        let data = { record_id: record_id };
        car_out(data).then((res) => {
          if (res.code == 200) {
            // 获取最新的数据
            this.getCarRecord()
            // 创建订单
            this.createOrder(record_id)
          } else {
            alert("数据错误");
          }
        });
      }else{
        alert('请输入手机号')
        }
    },

    // 创建订单
    createOrder(record_id) {
      let data = { record_id: record_id};
        create_order(data).then((res) => {
          if (res.code == 200) {
            // 创建订单完成后，获取支付链接
            this.getAlipay(res.order_id)
          } else {
            alert('创建订单失败')
          }
        })
    },

    // 获取支付链接
    getAlipay(order_id) {
      let data = { order_id: order_id};
      get_alipay(data).then((res) => {
          if (res.code == 200) {
            window.open(res.data, '_blank')
          } else {
            alert('创建订单失败')
          }
        })
    },

    // 查询支付
    checkAlipay(record_id) {
      let data = { record_id: record_id};
      check_alipay(data).then((res) => {
          if (res.code == 200) {
            alert('支付成功，离开')
          } else {
            alert('支付失败，请重新检查')
          }
        })
    }


  },
  mounted() {
    // this.getCarData();
    // this.getCarRecord();
  },
};
</script>

<style>
table {
  border: solid 1px black;
}

table td {
  padding-left: 60px;
  padding-right: 60px;
  border: solid 1px black;
}
</style>